<template>
    <div class="paymentStop2">
        <header>
            <van-nav-bar>
                <template #left>
                    <van-icon name="arrow-left" @click="$router.back()" size="20" color="black" />
                </template>
                <template #title>
                    <h4>支付结果</h4>
                </template>
            </van-nav-bar>
        </header>
        <main>
            <div class="result">
                <div class="title" v-if="isflag">支付成功<p> {{ time }} 秒后自动跳转首页 </p></div>
                <div class="title" v-else>支付失败</div>
                <div class="but">
                    <button @click="$router.push('/purchase/stop1')">查看订单</button>
                    <button @click="$router.push('/kind')">继续购物</button>
                </div>
            </div>
        </main>
    </div>
</template>
<style lang="stylus" scoped>
.paymentStop2
    display flex
    flex-direction column
    background-color #f5f5f5
    flex 1
    main
        flex 1
        display flex
        flex-direction column
        align-items center
        .result
            width 100%
        .title
            flex 1
            display flex
            flex-direction column
            align-items center
            padding 1.875rem
            color red
            p
                font-size .75rem
                padding-top .625rem
        .but
            flex 1
            display flex
            justify-content space-evenly
            button
                height 2.5rem
                width 6.25rem
                border 1px solid #555
                background-color white
</style>
<script>
import Vue from 'vue'
import { PasswordInput, NumberKeyboard } from 'vant'
Vue.use(PasswordInput)
Vue.use(NumberKeyboard)
export default {
  data () {
    return {
      isflag: true,
      time: 10,
      clearTime: 0
    }
  },
  methods: {
  },

  mounted () {
    // 绑定定时器设置10秒后自动跳转首页
    this.clearTime = setInterval(() => {
      this.time--
      if (this.time === -1) {
        this.$router.push('/home')
      }
    }, 1000)
  }
}
</script>
